import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { requireUser } from '@/lib/auth/session';
import { getCollection } from '@/lib/account/queries';
import { PageHeader, btnSecondary } from '@/components/account/page-header';
import { Card, CardHeader } from '@/components/ui/primitives';
import { ImportForm } from './import-form';

export const metadata: Metadata = { title: 'Import CSV', robots: { index: false } };

const TEMPLATE = 'asset_id,asset_slug,quantity,acquired_at,purchase_price,currency,grader,grade,cert,serial,source,condition,notes,tags\n,1999-base-set-charizard-4-102-1st-edition,1,2021-05-14,3200,USD,psa,10,12345678,,eBay,,bought from a friend,grail|sealed\n';

export default async function ImportPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const u = await requireUser(`/collections/${id}/import`);
  const col = await getCollection(u.id, id);
  if (!col) notFound();
  return (
    <>
      <nav className="mb-2 text-xs text-muted">
        <Link href={`/collections/${id}`} className="hover:text-fg">
          {col.name}
        </Link>{' '}
        / <span className="text-fg">Import</span>
      </nav>
      <PageHeader title="Import items from CSV" description="Up to 500 rows per file. Each row needs an asset_id (rare_…) or asset_slug from RareIndex; unknown assets are skipped and reported." actions={<a href={`data:text/csv;charset=utf-8,${encodeURIComponent(TEMPLATE)}`} download="rareindex-import-template.csv" className={btnSecondary}>Download template</a>} />
      <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_320px]">
        <Card>
          <CardHeader title="Upload" />
          <div className="p-4">
            <ImportForm collectionId={id} />
          </div>
        </Card>
        <Card>
          <CardHeader title="Columns" />
          <ul className="space-y-1 p-4 text-xs text-muted">
            <li>
              <code>asset_id</code> or <code>asset_slug</code> — required
            </li>
            <li>
              <code>quantity</code> — default 1
            </li>
            <li>
              <code>acquired_at</code> — YYYY-MM-DD
            </li>
            <li>
              <code>purchase_price</code>, <code>currency</code> — per unit, converted at acquisition-date FX
            </li>
            <li>
              <code>grader</code>, <code>grade</code>, <code>cert</code>, <code>serial</code>
            </li>
            <li>
              <code>source</code>, <code>condition</code>, <code>notes</code>
            </li>
            <li>
              <code>tags</code> — separated by <code>|</code> or commas
            </li>
          </ul>
        </Card>
      </div>
    </>
  );
}